<%-- 
    Document   : viewImage
    Created on : Jun 7, 2012, 4:39:40 PM
    Author     : Saji
--%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
<%@page import="java.util.Date"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<c:if test="${empty username}">
    <jsp:forward page="loginPage.jsp"/>
</c:if>


<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
<c:import url="WEB-INF/album-${param.albumId}.xml" var="album"/>
<x:parse var="doc" xml="${album}"/>


<html xmlns="http://www.w3.org/1999/xhtml" charset="UTF-8">
    <head>
        <title>View Images</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="css/layout-styles-1.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/layout1.js"></script>
    </head>
    <body onload="load()">
        <input id="albumId" type="hidden" name="albumId" value="${param.albumId}"/>
        <input id="albumName" type="hidden" name="albumName" value="${param.albumName}"/>
        <div id="left" class="border">
            <h3>Effects</h3>
            <div id="upper-left">
                <div class="left" onclick="filter('main-img','normal')"><img id="normal" class="effect-img" src="images/default.jpg"/><p>Normal</p></div>
                <div class="left" onclick="filter('main-img','flip-horizontal')"><img id="flip-horizontal" class="effect-img" src="images/default.jpg"/><p>Flip Horizontal</p></div>
                <div class="left" onclick="filter('main-img','flip-vertical')"><img id="flip-vertical" class="effect-img" src="images/default.jpg"/><p>Flip Vertical</p></div>
                <div class="left" onclick="filter('main-img','wave')"><img id="wave" class="effect-img" src="images/default.jpg"/><p>Wave</p></div>
                <div class="left" onclick="filter('main-img','fade')"><img id="fade" class="effect-img" src="images/default.jpg"/><p>Fade</p></div>
                <div class="left" onclick="filter('main-img','xray')"><img id="xray" class="effect-img" src="images/default.jpg"/><p>X-Ray</p></div>
                <div class="left" onclick="filter('main-img','blur')"><img id="blur" class="effect-img" src="images/default.jpg"/><p>Blur</p></div>
                <div class="left" onclick="filter('main-img','gray')"><img id="gray" class="effect-img" src="images/default.jpg"/><p>Gray</p></div>
                <div class="left" onclick="filter('main-img','invert')"><img id="invert" class="effect-img" src="images/default.jpg"/><p>Invert</p></div>
                <div class="left" onclick="filter('main-img','rotate-90')"><img id="rotate-90" class="effect-img" src="images/default.jpg"/><p>Rotate 90<span class="super">o</span></p></div>
                <div class="left" onclick="filter('main-img','rotate-180')"><img id="rotate-180" class="effect-img" src="images/default.jpg"/><p>Rotate 180<span class="super">o</span></p></div>
                <div class="left" onclick="filter('main-img','rotate-270')"><img id="rotate-270" class="effect-img" src="images/default.jpg"/><p>Rotate 270<span class="super">o</span></p></div>
            </div>
            <div id="lower-left" class="border">
                <a href="DefaultController?action=view_all_album"><img src="images/back.png" width="70px"/></a>
                <a href="PDFController?albumID=${param.albumId}"><img src="images/PDF_IC.png" width="70px"/></a>
                <a href="ConvertPDFServer?albumID=${param.albumId}"><img src="images/PDF_IC_TEXT.png" width="70px"/></a>
                <a><img class="click" onclick="javascript:deleteAlbum()" src="images/delete.png" width="70px"/></a>

            </div>
        </div>
        <div id="center" class="border">

            <div id="upper-center" class="border">
                <div id="left-upper-center">
                    <h2>${param.albumName}</h2>

                    <img id="main-img" src="<x:out select="$doc//image[1]/url"/>"/>
                    <div id="caption"><span id="imageCaption"><x:out select="$doc//image[1]/caption"/></span></div>
                    <div class="clear"></div>

                </div>
                <div id="right-upper-center">
                    <div id="uploadFile">
                        <span style="color: red; font-weight: bold">Upload new image to album</span><br/>
                        <form action="UploadFile" method="POST" enctype="multipart/form-data">
                            <br/>
                            Caption: <input type="text" name="txtCaption" value=""><br/>
                            Set as cover image: <input type="checkbox" name="isCover"><br/>
                            <br/>
                            <input type="file" name="theFile" style="max-width: 160px;"><br/>
                            <br/>
                            <input type="hidden" value="${param.albumId}" name="albumId">
                            <input type="submit" name="action" value="Upload" >
                        </form>
                    </div>
                    <div>

                        <a><img id="deleteImage" class="click" onclick="javascript:deleteImage()" src="images/delete.png" width="70px"/></a>
                        <a href="DefaultController?action=view_album&albumId=${param.albumId}"><img src="images/refresh.png" width="70px"/></a>
                        <br/><br/>
                        <a id="output"></a>
                    </div>
                </div>
            </div>
            <div id="lower-center"  class="border">
                <div id="inner-wrap">
                    <c:import url="WEB-INF/album-${param.albumId}.xml" var="album"/>
                    <x:parse var="doc" xml="${album}"/>
                    <x:forEach var="image" select="$doc//image">
                        <img src="<x:out select="$image/url"/>" id="img-<x:out select="$image/@id"/>">
                    </x:forEach>
                </div>
            </div>

        </div>

    </body>
</html>